<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ http://www.imooc.com/learn/176-->
    <title>Tab选项卡切换效果</title>
    <style>
    /* 这里是CSS代码 */
    *{  margin:0;
        padding:0;
        font-size:12px;
      }
    /*Border box 边框尺寸*/
    * {
       -moz-box-sizing: border-box;  /*Firefox3.5+*/
       -webkit-box-sizing: border-box; /*Safari3.2+*/
       -o-box-sizing: border-box; /*Opera9.6*/
       -ms-box-sizing: border-box; /*IE8*/
       box-sizing: border-box; /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
      }
    ul{
      list-style:none;
    }
    /*容器宽度，外边框*/
    .notice {
      width:300px;
      height:100px;
      margin:30px auto;
      border:1px solid #eee;
      overflow:hidden;
        }
    /*标签采用相对定位*/
    .notice-title {
        height:30px;
        position:relative;
        background:#F7F7F7;
        }
    /*采用绝对定位,相同宽度,左侧重叠*/    
    .notice-title ul {
      position:absolute;
      width:300px;
      left:-1px;
      }
    /*等分标签项，行高+下边框 = 30px*/  
    .notice-title li{
       float:left;
       width:60px;
       height:30px;
       line-height:29px;
       text-align:center;
       overflow:hidden;
       background:#F7F7F7;
       border-bottom:1px solid #eee;
      }
    /*当前选择项带左右边框，底部边框颜色白色*/  
    .notice-title li.select{
      background:#FFF;
      border-bottom-color:#FFF;
      border-left:1px solid #eee;
      border-right:1px solid #eee;
      padding:0;
      font-weight:bolder;
      }
    /*链接*/  
    .notice li a:link,.notice li a:visited {
      text-decoration:none;
      color:#000;
      }
    .notice li a:hover{color:#F90;}
    
    /*内容部分*/
    .notice-content .mod{margin:10px 6px;}
    
    /*内容部分的列表项目*/
    .notice-content .mod ul li{
      float:left;
      width:143px;
      height:25px;
      overflow:hidden;
      }
    </style>
  </head>
   <body>
   	<div id="notice" class="notice">
      <div id="notice-title" class="notice-title">
        <ul>
          <li class="select"><a href="#">公告</a></li>
          <li><a href="#">规则</a></li>
          <li><a href="#">论坛</a></li>
          <li><a href="#">安全</a></li>
          <li><a href="#">公益</a></li>
        </ul>
		</div>
    </div>
    <script type="text/javascript">
      
    </script>
   </body>
</html>